<template>
	<view class="order-wrapper">
		<view class="order-details">
			<view class="order-item">
				<view class="flex-c-s">
					<view class="flex-c fz26" style="align-items: center;">
						<view><text class="color666">订单支付状态</text> ： {{ orderPayStatus[orderInfo?.payStatus] }}</view>
					</view>
				</view>
			</view>
			<!-- <view class="order-item">
				<view class="flex-c-s">
					<view class="flex-c" style="align-items: center;">
						<image class="store-icon"  src="/static/images/store-b.png" mode=""></image>
						<view>暂无物流信息</view>
					</view>
				</view>
				<view class="flex-c-s">
					<view class="flex-c" style="align-items: center;">
						<image class="store-icon"  src="/static/images/store-b.png" mode=""></image>
						<view>
							<view>胡女士：18988887865</view>
							<view>陕西省西安市雁塔区电视台地铁口192号</view>
						</view>
					</view>
				</view>
			</view> -->
			<view class="order-item" >
				<view class="goods-wrapper">
					<view class="goods-item flex-c-s" >
						<view>
							<image class="goods-pic"  :src="orderInfo?.product?.listImage" mode=""></image>
						</view>
						<view class="goods-msg">
							<view class="goods-top">
								<view class="goods-title text-flemp2 fz30">
									{{ orderInfo?.product?.productDetail.name }}
								</view>
								
							</view>
							
							<view class="goods-price flex-c-s">
								<view class="color-theme fz26">￥{{orderInfo?.product?.productDetail?.sellingPrice }}</view>
								<view style="color: #999999;" class="fz26">共 {{ orderInfo?.productQuantity }} 件</view>
							</view>
							
							<view class="">
								<uni-tag class="mr10 mb15" v-for="s of orderInfo?.product?.productDetail?.specCombo" :inverted="true" :key="s.specId"
								:text="`${s.specName}:${s.specValue}`" />
							</view>
						</view>
					</view>
					<view class="flex-c-s fz26 color666">
						<text>备注：</text><text>{{orderInfo.remark}}</text>
					</view>
				</view>
			</view>
			<view class="order-msg">
				<view class="item">
					<view class="color666 fz26">订单编号:</view>
					<view class="fz26 flex-c">
						<view>{{orderInfo?.code}}</view>
						<image src="/static/images/copy.png" style="width: 30rpx;height: 30rpx;margin-left: 8rpx;" mode="" @click="copyCode(orderInfo?.code)"></image>
					</view>
				</view>
				<view class="item">
					<view class="color666 fz26">下单时间:</view>
					<view class="fz26">{{orderInfo?.createdAt}}</view>
				</view>
				<view class="item">
					<view class="color666 fz26">支付方式:</view>
					<view class="fz26">{{payTypeEnum[orderInfo?.payType]}}</view>
				</view>
			</view>
			<view class="order-msg">
				<view class="item">
					<view class="color666 fz26">商品金额:</view>
					<view class="fz26">￥{{orderInfo?.product?.productDetail?.sellingPrice}}</view>
				</view>
				<view class="item">
					<view class="color666 fz26">运费:</view>
					<view class="fz26">免运费</view>
				</view>
				<view class="item">
					<view class="color666 fz26">实付金额:</view>
					<view class="fz26">￥{{orderInfo?.totalProductPrice}}</view>
				</view>
			</view>
			
			<view class="order-msg">
				<view class="item">
					<view class="color666 fz26">门店名称:</view>
					<view class="fz26">{{orderInfo?.store?.storeName}}</view>
				</view>
				<view class="item">
					<view class="color666 fz26">门店地址:</view>
					<view class="fz26">{{orderInfo?.store?.address}}</view>
				</view>
				<view class="item">
					<view class="color666 fz26">门店电话:</view>
					<view class="fz26">{{orderInfo?.store?.phone}}</view>
				</view>
			</view>
		</view>
		
		<view class="" v-if="orderInfo?.payStatus === 1 || orderInfo?.payStatus === 2">
			<BootomPay 
			:payCode="orderInfo.payCode"
			:orderId="orderInfo?.id"
			:total="orderInfo?.totalProductPrice"
			:preferential="0"
			:count=" orderInfo?.productQuantity"
			:payType="orderInfo.payType"
			@success="paySuccess"
			@fail="payFail"
			@openPayment="openPayment"
			 />
		</view>
		<Payment ref="paymentNode" :disabledWeChatPay="true" @confirm="confirmHandle" @changeType="changeType" />
		<CustomeModal ref="customeModalNode" @confirmModal="confirmModal" />
		<CustomeModal ref="tryCustomeModalNode" @confirmModal="tryConfirmModal" content="正在尝试余额支付" />
		
		<view class="customer-service-btn flex-c-c" @click="customerService">
			<image src="/static/images/Frame8@2x.png" style="width: 84rpx; height: 84rpx;" mode=""></image>
		</view>
	</view>
</template>

<script lang="ts">
import { defineComponent, reactive, toRefs, ref } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
import { orderDetail } from '@/http/my'
import { payTypeEnum, orderPayStatus } from '@/config'
import { paymentHadle, createOrder } from '@/http/shop'

import Payment from '@/components/Payment.vue'
import BootomPay from '@/components/BottomPay.vue'
import CustomeModal from '@/components/CustomeModal.vue'
import type { IOrder } from '@/types'

const qiyuModule = uni.requireNativePlugin("Netease-QiyuModule")
export default defineComponent({
	components: { BootomPay, Payment, CustomeModal },
	setup() {
		const paymentNode = ref()
		const customeModalNode = ref()
		const tryCustomeModalNode = ref()
		const state = reactive({
			tabList: [{
				name: '全部',
			}, {
				name: '待付款',
			}, {
				name: '待发货'
			}, {
				name: '待收货'
			}, {
				name: '已完成'
			}],
			orderInfo: {} as IOrder,
			payTypeEnum,
			orderPayStatus,
			orderId: 0
		})
		
		onLoad( async (option: any) => { 
			if(option.id!) {
				state.orderId = option.id
				getOrderInfo(state.orderId)
			}
			
		})
		
		const changeTab = (item: any) => {
		    console.log('item', item);
		}
		
		const goToOrderDetails = (item:any) =>{
			// uni.navigateTo({
			// 	url:`/pages/myPackge/order/details?id=${item.id}`
			// })
		}
		
		const customerService = () => { // 跳转客服
			qiyuModule.openServiceActivity({
				title: '客服会话',
				source: {
					title: 'xad-y89',
					ios_sendProduct: false,
				},
			})
		}
		
		const getOrderInfo = async (id: number) => {
			let res = await orderDetail(id)
			if(res.code === 0) {
				state.orderInfo = res.data
			}
			console.log(res);
		}
		
		const openPayment = async () => {
			paymentNode.value.openLayer()
		}
		
		const paySuccess = () => {
			uni.navigateTo({
				url: `/pages/myPackge/payment/paymentStatus?payStatus=${1}&money=${state.orderInfo?.productPrice}&time=${state.orderInfo?.createdAt}&orderNum=${state.orderInfo?.payId || '-'}`
			})
		}
		
		const payFail = () => {
			uni.showToast({
				title: '支付失败',
				icon: 'error',
				success() {
					uni.navigateTo({
						url: `/pages/myPackge/payment/paymentStatus?payStatus=${0}&money=${state.orderInfo?.productPrice}&time=${state.orderInfo?.createdAt}&orderNum=${state.orderInfo?.payId || '-'}`
					})
				}
			})
		}
		
		const changeType = (type: number) => { // 切换支付类型
			state.orderInfo.payType = type
		}
		
		const confirmHandle = async (type: number,) => { // 确定支付回调
			state.orderInfo.payType = type 
			if(state.orderInfo.payType  === 3 || state.orderInfo.payType === 4) {
				customeModalNode.value.showModal()
			} else if(state.orderInfo.payType === 2){
				let resPay = await paymentHadle(state.orderInfo.payCode, 2, '')
				if(resPay.code === 0) {
					uni.requestPayment({
					    provider: 'alipay',
					    orderInfo: resPay.data.payParam, //微信、支付宝订单数据 【注意微信的订单信息，键值应该全部是小写，不能采用驼峰命名】
					    success: function (res) {
							uni.showToast({ title: '支付成功', icon: 'success' }) 
							getOrderInfo(state.orderId)
					    },
					    fail: function (err) {
							tryCustomeModalNode.value.showModal()
					    }
					})
				} else {
					uni.showToast({
						title: resPay.msg || '请求出错',
						icon: 'none'
					})
				}
				
			}
		}
		const tryConfirmModal= async (content: string) => {
			if(content) {
				confirmModal(content, 4)
			} else {
				uni.showToast({ title: '输入支付密码', icon: 'error' }) 
			}
		}
		
		const confirmModal = async (content: string, payType:number = 4) => { 
			if(content) {
				let resPay = await paymentHadle(state.orderInfo.payCode, state.orderInfo.payType === 2 ? 4 : state.orderInfo.payType, content)
				if(resPay.code === 0) {
					uni.showToast({ title: '支付成功', icon: 'success' }) 
					getOrderInfo(state.orderId) 
				} else {
					uni.showToast({
						title: resPay.msg || '请求出错',
						icon: 'none'
					})
				}
				tryCustomeModalNode.value.cancel()
				customeModalNode.value.cancel()
			} else {
				uni.showToast({ title: '输入支付密码', icon: 'error' }) 
			} 
		}
		
		const copyCode = (code: string) => {
			uni.setClipboardData({
				data: code,
				success: function () {
					uni.showToast({ title: '复制成功', icon: 'success' }) 
				}
			});
		}
		
		return {
			paySuccess,
			payFail,
			changeTab,
			goToOrderDetails,
			customerService,
			openPayment,
			confirmHandle,
			changeType,
			confirmModal,
			tryConfirmModal,
			customeModalNode,
			tryCustomeModalNode,
			paymentNode,
			copyCode,
			...toRefs(state)
		}
	}
})
</script>

<style>
	page{ background-color: #f8f8fa;}
</style>

<style lang="scss" scoped>
.order-wrapper{
	padding-bottom: 130rpx;
	.order-details{
		padding: 0 24rpx 200rpx;
		.order-item{
			background: #ffffff;
			border-radius: 16rpx;
			padding: 20rpx;
			margin-top: 20rpx;
			.store-icon{
				width: 32rpx;
				height: 32rpx;
				margin-right: 5rpx;
			}
			.goods-wrapper{
				border-radius: 16rpx;
				overflow: hidden;
				background: #fff;
				margin-top: 10rpx;
				margin-bottom: 20rpx;
				.goods-item{
					align-items: flex-start;
					justify-content: flex-start;
					margin: 10rpx 0;
					.goods-pic{
						width: 170rpx;
						height: 170rpx;
						margin-right: 10rpx;
					}
					.goods-msg{
						padding: 20rpx;
						flex: 1;
						.goods-top{
							font-size: 26rpx;
							font-weight: 500;
							text-align: LEFT;
							color: #333333;
							line-height: 44rpx;
							display: flex;
							justify-content:space-between;
							.goods-title{
								display: flex; 
							}
							.goods-price{
								display: flex;
								flex-direction: column;
								align-items: flex-end; 
								flex: 1;
							}
						}
					}
				}
			}
		}
		.order-msg{
			background: #ffffff;
			border-radius: 16rpx;
			padding: 20rpx;
			margin-top: 20rpx;
			.item{
				display: flex;
				padding: 12rpx 0;
				align-items: center;
				justify-content: flex-start;
				.color666{
					width: 140rpx;
				}
			}
		}
	}
	.customer-service-btn{
		bottom: 200rpx;
	}
}
</style>